<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
请输入你的名字: <input type="text" id="user" >

<!--请用js实现：当获取到焦点时，输入框背景变为黄色，当失去焦点时，弹出用户输入的内容（用trim()函数去除两端的空格），若未得到有效字符，弹出提示消息：用户名不能为空-->
<script>
    var userInput = document.getElementById('user');

    userInput.addEventListener('focus', function() {
        userInput.style.backgroundColor = 'yellow';
    });

    userInput.addEventListener('blur', function() {
        userInput.style.backgroundColor = '';
        var userName = userInput.value.trim();

        if (userName === '') {
            alert('用户名不能为空');
        } else {
            alert('你输入的是: ' + userName);
        }
    });
</script>
</body>
</html>

